<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo" style="text-align: center">
            <h3 style="color: white; top: -13px">ToDoNow</h3>
          </div>
          <div class="layout-nav" style="width: 620px; height: 50px">
            <MenuItem name="0" style="top: 6px; color: black; left: -320px; top: 10px">
            <!-- 显示天气 -->
            <weather></weather>
            </MenuItem>
            <MenuItem name="1" @click="home">
            <Icon type="ios-navigate"></Icon>
            首页
            </MenuItem>
            <MenuItem name="2" @click="showinsert">
            <Icon type="ios-keypad"></Icon>
            添加日程
            </MenuItem>
            <!-- 添加页面 Start -->
            <a-modal hide-cancel="true" ontext v-model:visible="visible" title="添加待办" @cancel="handleCancel">
              <div style="width: 200px">
                <a-form ref="formRef" :size="form.size" :model="form" :style="{ width: '480px' }"
                  @submit="handleSubmit">
                  <a-form-item field="theme" label="主题" :rules="[
                    { required: true, message: '请填写主题' },
                    { message: '输入待办主题' },
                  ]" :validate-trigger="['change', 'input']">
                    <a-input v-model="form.theme" placeholder="输入待办主题" />
                  </a-form-item>

                  <a-form-item field="content" label="待办内容" :rules="[
                    { required: true, message: '请填写内容' },
                    { message: '输入待办事项' },
                  ]" :validate-trigger="['change', 'input']">
                    <a-textarea v-model="form.content" type="textarea" placeholder="输入待办事项" />
                  </a-form-item>

                  <a-form-item label="时间" field="time" :rules="[
                    { required: true, message: '请选择时间' },
                    { message: '选择时间' },
                  ]" :validate-trigger="['change', 'input']">
                    <a-range-picker v-model="form.time" show-time format="YYYY-MM-DD HH:mm" @ok="onOk" />
                  </a-form-item><br />

                  <a-form-item field="address" label="地点" style="top: -20px" :rules="[
                    { required: true, message: '请填写地点' },
                    { message: '输入地点' },
                  ]" :validate-trigger="['change', 'input']">
                    <a-input v-model="form.address" placeholder="输入地点" />
                  </a-form-item>
                  <a-form-item field="section" label="搭档" style="top: -20px" :rules="[{ message: 'must select one' }]">
                    <a-select v-model="form.section" placeholder="请选择搭档">
                      <a-option value="">不选</a-option>
                      <a-option value="陈叶菁">陈叶菁</a-option>
                      <a-option value="王鹏程">王鹏程</a-option>
                      <a-option value="王宇航">王宇航</a-option>
                      <a-option value="朱训">朱训</a-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item field="radio" label="类别" style="top: -20px" :rules="[{ message: 'must select one' }]">
                    <a-radio-group v-model="form.radio">
                      <a-radio value="生活">生活</a-radio>
                      <a-radio value="娱乐">娱乐</a-radio>
                      <a-radio value="工作">工作</a-radio>
                      <a-radio value="学习">学习</a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item>
                    <a-space>
                      <a-button html-type="submit">提交</a-button>&nbsp&nbsp
                      <a-button @click="$refs.formRef.resetFields()">重置</a-button>
                    </a-space>
                  </a-form-item>
                </a-form>
              </div>
              <template #footer>
                <div></div>
              </template>
            </a-modal>
            <!-- 添加页面 END -->

            <MenuItem name="3" @click="search">
            <Icon type="ios-analytics"></Icon>
            查询
            </MenuItem>
            <!-- 
            <MenuItem name="4">
            <Icon type="ios-paper"></Icon>
            Item 4
            </MenuItem> -->

            <a-space size="large">
              <a-dropdown trigger="hover">
                <MenuItem name="4">
                <Space size="large" wrap>
                  <Avatar :src="user.userInfo.avatar" />
                </Space>
                </MenuItem>
                <template #content>
                  <a-doption @click="myinfo">我的信息</a-doption>
                  <a-doption @click="quit">退出</a-doption>
                </template>
              </a-dropdown>
            </a-space>
          </div>
        </Menu>
      </Header>
      <Layout style="height: 900px">
        <Sider hide-trigger :style="{ background: '#fff' }">
          <Menu active-name="1-1" theme="light" width="auto" :open-names="['1']">
            <Submenu name="1">
              <template #title>
                <Icon type="ios-navigate"></Icon>
                操作
              </template>
              <MenuItem name="1-1" @click="home">首页</MenuItem>
              <MenuItem name="1-2" @click="searchTodolist">查询</MenuItem>
              <MenuItem name="1-3" @click="byWeek">按周查看</MenuItem>
              <MenuItem name="1-4" @click="byDay">按日查看</MenuItem>
              <MenuItem name="1-5" @click="getCount">查看效率</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '0 24px 24px' }">
          <Breadcrumb :style="{ margin: '15px 0' }">

          </Breadcrumb>
          <Content :style="{ padding: '24px', minHeight: '280px', background: '#fff' }">
            <!-- 显示的内容 -->
            <RouterView></RouterView>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
  <!-- 我的信息 -->
  <myInfo v-model="infovisible"></myInfo>
  <!-- 查询页面 -->
  <Search v-model="searchvisible"></Search>
</template>
<script>
import weather from "@/views/utils/weatherShow.vue";
import Calendar from "@/views/Calendar/calendar.vue";
import Search from "@/views/Form/search.vue";
import { reactive } from "vue";
import { ref, computed } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
import router from "@/router";
import myInfo from "@/views/Form/myInfo.vue";
import userCount from "@/stores/userCount";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
export default {
  components: {
    Calendar,
    myInfo,
    weather,
    Search,
  },
  setup() {
    let alltodoList = reactive();
    const route = useRoute();
    let user = userCount();
    let visible = ref(false);
    let infovisible = ref(false);
    let searchvisible = ref(false);

    const store = userCount();
    const { getCount } = store;

    const form = reactive({
      theme: "",
      content: "",
      address: "",
      section: "",
      date: ["", ""],
      time: "",
      radio: "生活",
    });

    const form2 = reactive({
      theme: "",
      content: "",
      address: "",
      type: "",
      partner: "",
      status: "",
      startDate: "",
      endDate: "",
      userId: user.userid,
    });

    let startDate = ref("0");
    let endDate = ref("0");
    /* 页面跳转 */
    /* 主页 */
    const home = () => {
      router.push("/mainMenu");
    };
    /* 查询 */
    const searchTodolist = () => {
      axios.post('http://8.130.43.203:8080/content/findByAnyWhat', form2).then(resp => {
        user.searchlist = resp.data
        router.push('/SearchCalendar')
      })
    }
    /* 按周 */
    const byWeek = () => {
      router.push("/week");
    };
    /* 按日 */
    const byDay = () => {
      router.push("/day");
    };

    /* 查看本人信息 */
    const myinfo = () => {
      infovisible.value = true;
      console.log(infovisible.value);
    };
    /* 查询弹框 */
    const search = () => {
      /* 获取登录者所有todolist*/
      axios
        .post("http://8.130.43.203:8080/content/findByAnyWhat", form2)
        .then((resp) => {
          user.searchlist = resp.data;
        });
      searchvisible.value = true;
      console.log("search");
      console.log(searchvisible.value);
    };

    /* 提交代办 */
    const handleSubmit = ({ values, errors }) => {
      console.log(values);
      axios
        .post("http://8.130.43.203:8080/content/addTodo", {
          userId: user.userid,
          theme: values.theme,
          content: values.content,
          address: values.address,
          startDate: startDate,
          endDate: endDate,
          type: values.radio,
          partner: values.section,
          status: 0,
        })
        .then((resp) => {
          user.todolist = resp.data;
          ElMessage({
            message: "添加成功",
            type: "success",
          });
          visible.value = false;
        });
    };

    function onOk(dateString) {
      (startDate = dateString[0]), (endDate = dateString[1]);
      console.log(startDate);
      console.log(endDate);
    }
    let status = ref(false);

    function addstatus() {
      status.value = !status.value;
      console.log(status);
    }

    const showinsert = () => {
      visible.value = true;
      console.log(visible.value);
    };

    const handleCancel = () => {
      visible.value = false;
    };

    const quit = () => {
      router.push("/");
      /* 导航守卫 退出设置为false */
      sessionStorage.setItem("isLogin", false);
    };
    const getAll = () => {
      store.getAll();
    };

    return {
      form,
      handleSubmit,
      onOk,
      startDate,
      endDate,
      addstatus,
      status,
      visible,
      showinsert,
      handleCancel,
      route,
      user,
      home,
      byWeek,
      byDay,
      myinfo,
      infovisible,
      visible,
      getCount,
      getAll,
      search,
      searchvisible,
      quit,
      searchTodolist
    };
  },
};
</script>
<style>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  width: 1248px;
  height: 880px;
  left: -25px;
}

.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
</style>
